<template>
	<view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" @maskClick="cancel">
			<view class="cont">
				<view class="head uni-flex uni-justify-content-sb uni-align-items-c">
					<view class="lf">
						{{title}}
					</view>
					<view class="rt" @click="cancel">
						取消
					</view>
				</view>
				<scroll-view class="body" scroll-y="true">
					<view @click="itemClick(index)" v-for="(item,index) in _list" :key="index"
						class="item uni-flex uni-justify-content-c uni-align-items-c" :class="{active:item.checked}">
						<image v-if="item.checked" class="icon" src="../static/image/circle-checked.png" mode="">
						</image>
						<image v-else class="icon" src="../static/image/circle.png" mode=""></image>
						{{item.value}}
					</view>
				</scroll-view>
				<view class="foot uni-flex uni-justify-content-c uni-align-items-c">
					<view class="btn" @click="submit">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "multipleChoice",
		props: ['title', 'list'],
		data() {
			return {
				_list: null
			};
		},
		created() {
			this._list = this.list;
		},
		methods: {
			open() {
				this.$refs.popup.open();
			},
			itemClick(index) {
				this._list[index].checked = !this._list[index].checked;
				this.$forceUpdate();
			},
			cancel() {
				this.$refs.popup.close();
				this._list.map(item => {
					item.checked = false;
				})
				this.$forceUpdate();
				this.$emit('multipleChoice', 'cancel', this._list)
			},
			submit() {
				this.$refs.popup.close();
				this.$emit('multipleChoice', 'submit', this._list)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cont {
		width: 100%;
		height: 740rpx;
		position: relative;
		z-index: 1000;

		.head {
			width: 100%;
			height: 108rpx;
			background: #fff;
			padding: 0 28rpx;
			border-bottom: solid 2rpx #EEEEEE;
			position: fixed;
			left: 0;
			top: 0;

			.lf {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #000000;
			}

			.rt {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
		}

		.body {
			padding: 108rpx 28rpx;
			height: 740rpx;

			.item {
				height: 104rpx;
				border-bottom: solid 2rpx #F5F5F5;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #BEBEBE;
				position: relative;

				.icon {
					width: 32rpx;
					height: 32rpx;
					position: absolute;
					top: 36rpx;
					left: 0;
				}
			}

			.item:last-child {
				border-bottom: none;
			}

			.item.active {
				color: #30A1FF;
			}
		}

		.foot {
			width: 750rpx;
			height: 100rpx;
			background: #FFFFFF;
			box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.16);
			position: fixed;
			left: 0;
			bottom: 0;

			.btn {
				width: 686rpx;
				height: 80rpx;
				background: #30A1FF;
				border-radius: 40rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
			}
		}
	}
</style>
